<template>
  <el-card class="tracking-tutorial" title="网站跟踪使用教程" style="margin-bottom: 24px">
    <el-tabs v-model="currentTab">
      <el-tab-pane label="教程概述" name="intro">
        <div class="tutorial-section">
          <h4>网站跟踪系统概述</h4>
          <p>
            我们的网站跟踪系统基于轻量级埋点技术，可以帮助您监控和分析网站访问情况，
            特别是用户在您网站上的行为路径和交互，无需复杂的配置即可快速实现精确统计。
          </p>
          
          <el-divider />
          
          <el-steps direction="vertical" :active="3" finish-status="success">
            <el-step title="获取跟踪代码" description="在网站管理页面获取唯一的跟踪ID和嵌入代码" />
            <el-step title="嵌入到网站" description="将生成的脚本标签添加到您网站的所有页面" />
            <el-step title="配置自定义跟踪" description="根据业务需要，设置特定事件的按钮级PV跟踪" />
            <el-step title="查看分析数据" description="在统计面板实时查看和分析用户行为数据" />
          </el-steps>
          
          <el-divider />
          
          <el-alert
            title="系统特点"
            type="success"
            :closable="false"
            show-icon
          >
            <ul>
              <li><strong>插件化架构：</strong>易于扩展，无需修改核心代码</li>
              <li><strong>批量上传：</strong>减少网络请求，提高性能</li>
              <li><strong>按钮级跟踪：</strong>精确捕获用户交互行为</li>
              <li><strong>页面关闭前上传：</strong>确保数据不丢失</li>
              <li><strong>低耦合设计：</strong>各模块职责明确，依赖关系简单</li>
            </ul>
          </el-alert>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="基础跟踪" name="basic">
        <div class="tutorial-section">
          <h4>基础跟踪实现</h4>
          <p>
            基础跟踪只需要在您网站的 <code>&lt;head&gt;</code> 部分加入以下代码即可实现自动页面访问统计。
            系统会自动捕获页面访问、停留时间、来源等信息。
          </p>
          
          <el-card title="基础跟踪代码" style="margin-bottom: 20px">
            <template #header>
              <div style="display: flex; justify-content: space-between; align-items: center">
                <span>基础跟踪代码</span>
                <el-button type="text" :icon="DocumentCopy" @click="copyCode(codeExamples.basicScript)">
              复制代码
            </el-button>
              </div>
            </template>
            <pre class="code-block"><code>{{ codeExamples.basicScript }}</code></pre>
          </el-card>
          
          <h5>配置选项</h5>
          <p>您可以通过以下属性自定义跟踪行为：</p>
          <ul>
            <li><code>data-tracking-id</code>: 您的唯一跟踪ID（必填）</li>
            <li><code>data-api-url</code>: API服务器URL（可选，默认从脚本URL推断）</li>
            <li><code>data-debug</code>: 启用调试模式，值为"true"或"false"（可选）</li>
            <li><code>data-min-interval</code>: 最小跟踪间隔，单位毫秒（可选）</li>
            <li><code>data-enable-spa</code>: 是否启用单页应用跟踪，值为"true"或"false"（可选）</li>
            <li><code>data-batch-enabled</code>: 是否启用批量上传，值为"true"或"false"（可选）</li>
            <li><code>data-batch-size</code>: 批量上传的事件数量阈值（可选）</li>
            <li><code>data-batch-interval</code>: 批量上传的时间间隔，单位毫秒（可选）</li>
          </ul>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="按钮级PV" name="button">
        <div class="tutorial-section">
          <h4>按钮级PV跟踪实现 <el-tooltip content="业界推荐方式"><el-icon><QuestionFilled /></el-icon></el-tooltip></h4>
          <p>
            按钮级PV跟踪可以帮助您了解用户在页面上的具体操作，是产品优化和转化率提升的重要数据来源。
            以下是几种实现方式，您可以根据项目技术栈选择合适的方案。
          </p>
          
          <el-card title="方法一：原生JavaScript实现" style="margin-bottom: 20px">
            <template #header>
              <div style="display: flex; justify-content: space-between; align-items: center">
                <span>方法一：原生JavaScript实现</span>
                <el-button type="text" :icon="DocumentCopy" @click="copyCode(codeExamples.buttonPV)">
                  复制代码
                </el-button>
              </div>
            </template>
            <pre class="code-block"><code>{{ codeExamples.buttonPV }}</code></pre>
          </el-card>

          <el-divider>
            <el-icon><Tools /></el-icon> 高级实现方案
          </el-divider>
          
          <el-tabs v-model="buttonTab">
            <el-tab-pane label="React组件" name="react">
              <el-card title="React可追踪按钮组件" style="margin-bottom: 20px">
                <template #header>
                  <div style="display: flex; justify-content: space-between; align-items: center">
                    <span>React可追踪按钮组件</span>
                    <el-button type="text" :icon="DocumentCopy" @click="copyCode(codeExamples.reactExample)">
                      复制代码
                    </el-button>
                  </div>
                </template>
                <p>通过高阶组件(HOC)模式封装跟踪能力，可以轻松为任何组件添加埋点功能：</p>
                <pre class="code-block"><code>{{ codeExamples.reactExample }}</code></pre>
              </el-card>
              
              <el-card title="React Hooks实现">
                <template #header>
                  <div style="display: flex; justify-content: space-between; align-items: center">
                    <span>React Hooks实现</span>
                    <el-button type="text" :icon="DocumentCopy" @click="copyCode(codeExamples.reactHookExample)">
                      复制代码
                    </el-button>
                  </div>
                </template>
                <p>使用React Hooks封装埋点逻辑，可以更灵活地在函数组件中使用：</p>
                <pre class="code-block"><code>{{ codeExamples.reactHookExample }}</code></pre>
                
                <el-divider />
                
                <p><strong>使用示例：</strong></p>
                <pre class="code-block"><code>{{ codeExamples.reactHookUsage }}</code></pre>
              </el-card>
            </el-tab-pane>
            
            <el-tab-pane label="Vue组件" name="vue">
              <el-card title="Vue可追踪按钮组件">
                <template #header>
                  <div style="display: flex; justify-content: space-between; align-items: center">
                    <span>Vue可追踪按钮组件</span>
                    <el-button type="text" :icon="DocumentCopy" @click="copyCode(codeExamples.vueExample)">
              复制代码
            </el-button>
                  </div>
                </template>
                <pre class="code-block"><code>{{ codeExamples.vueExample }}</code></pre>
                
                <el-divider />
                
                <p><strong>使用示例：</strong></p>
                <pre class="code-block"><code>{{ codeExamples.vueUsage }}</code></pre>
              </el-card>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="批量上传" name="batch">
        <BatchTrackingSection :copy-code="copyCode" />
      </el-tab-pane>

      <el-tab-pane label="插件架构" name="plugin">
        <PluginArchitectureSection :copy-code="copyCode" />
      </el-tab-pane>
      
      <el-tab-pane label="高级配置" name="advanced">
        <div class="tutorial-section">
          <h4>高级配置与最佳实践 <el-icon><Tools /></el-icon></h4>
          <p>
            以下是一些高级配置和最佳实践，可以帮助您更有效地使用跟踪系统。
          </p>
          
          <el-card title="性能优化" style="margin-bottom: 20px">
            <ul>
              <li><strong>批量处理：</strong> 对于高频事件，使用批量发送减少请求数量</li>
              <li><strong>防抖处理：</strong> 对于连续触发的事件，如滚动或输入，应用防抖技术</li>
              <li><strong>资源加载优化：</strong> 使用异步加载脚本，减少对页面性能的影响</li>
            </ul>
          </el-card>
          
          <el-card title="埋点规范" style="margin-bottom: 20px">
            <p>为保持埋点数据的一致性和可分析性，建议遵循以下命名规范：</p>
            <pre class="code-block"><code>{{ codeExamples.namingConvention }}</code></pre>
          </el-card>
          
          <el-card title="埋点测试与验证">
            <p>在生产环境中启用埋点前，建议先进行充分测试：</p>
            <ol>
              <li>启用调试模式：添加 <code>data-debug="true"</code> 属性</li>
              <li>观察控制台输出，验证埋点事件触发</li>
              <li>使用网络面板检查请求发送情况</li>
              <li>在统计面板验证数据是否正确记录</li>
            </ol>
            <el-divider />
            <el-space>
              <el-button type="primary" :icon="Check" @click="handleVerifyTracking">
                验证埋点
              </el-button>
              <span style="color: #999">点击此按钮将触发一个测试埋点事件</span>
            </el-space>
          </el-card>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="交互演示" name="demo">
        <div class="tutorial-section">
          <ButtonTrackingDemo />
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { DocumentCopy, QuestionFilled, Tools, Check } from '@element-plus/icons-vue'
import BatchTrackingSection from './tutorial/BatchTrackingSection.vue'
import PluginArchitectureSection from './tutorial/PluginArchitectureSection.vue'
import ButtonTrackingDemo from './ButtonTrackingDemo.vue'

const currentTab = ref('intro')
const buttonTab = ref('react')

const scriptTag = 'script'

const codeExamples = {
  basicScript: `<${scriptTag} async src="https://your-server.com/tracking/script.js" data-tracking-id="YOUR_TRACKING_ID"></${scriptTag}>`,
  
  buttonPV: `// 按钮点击时手动触发PV统计
function handleButtonClick() {
  // 1. 执行业务逻辑
  doSomething();
  
  // 2. 触发PV埋点统计
  if (window.DevOpsBITracker) {
    window.DevOpsBITracker.trackEvent(
      'button', // 类别
      'click',  // 动作
      'submit_form', // 标签
      1,       // 值
      { 
        buttonName: 'submit', 
        pageSection: 'checkout'
      }
    );
  }
}`,

  reactExample: `import React from 'react';

// 创建埋点追踪高阶组件
const withTracking = (Component) => {
  return function TrackedComponent(props) {
    // 封装点击处理函数添加埋点
    const trackEvent = (category, action, label, value, customData) => {
      if (window.DevOpsBITracker) {
        window.DevOpsBITracker.trackEvent(
          category,
          action, 
          label,
          value,
          customData
        );
      }
    };

    // 给组件注入埋点能力
    return <Component {...props} trackEvent={trackEvent} />;
  };
};

// 示例按钮组件
const TrackableButton = ({ onClick, children, eventData, trackEvent, ...rest }) => {
  const handleClick = (e) => {
    // 先执行原始点击处理
    if (onClick) onClick(e);
    
    // 再触发埋点
    if (eventData && trackEvent) {
      const { category, action, label, value, customData } = eventData;
      trackEvent(category, action, label, value, customData);
    }
  };

  return (
    <button onClick={handleClick} {...rest}>
      {children}
    </button>
  );
};

// 使用高阶组件增强
export default withTracking(TrackableButton);`,

  reactHookExample: `import { useCallback } from 'react';

// 埋点Hook
export function useTracking() {
  // 封装埋点方法
  const trackEvent = useCallback((category, action, label, value, customData) => {
    if (window.DevOpsBITracker) {
      window.DevOpsBITracker.trackEvent(
        category,
        action, 
        label,
        value,
        customData
      );
    }
  }, []);

  // 为常见场景创建便捷方法
  const trackButtonClick = useCallback((buttonName, pageName, extraData = {}) => {
    trackEvent('button', 'click', buttonName, 1, {
      page: pageName,
      ...extraData
    });
  }, [trackEvent]);
  
  const trackPageView = useCallback((pageName, extraData = {}) => {
    if (window.DevOpsBITracker) {
      window.DevOpsBITracker.trackCustomData({
        page: pageName,
        ...extraData
      });
    }
  }, []);

  // 返回所有埋点方法
  return {
    trackEvent,
    trackButtonClick,
    trackPageView
  };
}`,

  reactHookUsage: `function MyComponent() {
  const { trackButtonClick } = useTracking();
  
  return (
    <button onClick={() => {
      // 执行业务逻辑
      submitForm();
      // 触发埋点
      trackButtonClick('submit_button', 'checkout_page');
    }}>
      提交订单
    </button>
  );
}`,

  vueExample: `<template>
  <button @click="handleClick" :class="buttonClass">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'TrackableButton',
  props: {
    eventCategory: String,
    eventAction: {
      type: String,
      default: 'click'
    },
    eventLabel: String,
    eventValue: Number,
    customData: Object,
    buttonClass: String
  },
  methods: {
    handleClick(event) {
      // 触发埋点
      this.trackButtonEvent();
      
      // 向父组件传递原始点击事件
      this.$emit('click', event);
    },
    trackButtonEvent() {
      if (window.DevOpsBITracker) {
        window.DevOpsBITracker.trackEvent(
          this.eventCategory || 'button',
          this.eventAction,
          this.eventLabel,
          this.eventValue,
          this.customData
        );
      }
    }
  }
}
</${scriptTag}>`,

  vueUsage: `<template>
  <div class="form-container">
    <TrackableButton
      event-category="form"
      event-action="submit"
      event-label="registration_form"
      :custom-data="{ formType: 'user_registration' }"
      button-class="submit-button"
      @click="submitForm"
    >
      提交注册
    </TrackableButton>
  </div>
</template>`,

  namingConvention: `// 推荐的埋点命名规范
{
  category: '[模块]_[页面]',    // 例如：'user_profile'
  action: '[动作]',            // 例如：'click', 'submit', 'view'
  label: '[元素]_[目标]',      // 例如：'button_submit', 'link_help'
  value: Number,              // 可用于统计时长或数值
  customData: {
    // 自定义业务数据
    businessId: 'xxx',
    flowId: 'yyy',
    position: 'header'
  }
}`
}

const copyCode = (code: string) => {
  navigator.clipboard.writeText(code)
    .then(() => ElMessage.success('代码已复制到剪贴板'))
    .catch(() => ElMessage.error('复制失败'))
}

const handleVerifyTracking = () => {
  if ((window as any).DevOpsBITracker) {
    ;(window as any).DevOpsBITracker.trackEvent(
      'tutorial',
      'verify',
      'tracking_verification',
      1,
      {
        timestamp: new Date().toISOString(),
        source: 'tutorial_page'
      }
    )
    ElMessage.success('测试埋点事件已触发，请查看控制台和网络面板')
  } else {
    ElMessage.warning('埋点追踪器未加载，请先嵌入跟踪脚本')
  }
}
</script>

<style scoped lang="scss">
.tracking-tutorial {
  :deep(.el-tabs__content) {
    padding-top: 16px;
  }
}

.tutorial-section {
  h4, h5 {
    margin-top: 0;
  }
  
  h4 {
    margin-bottom: 16px;
  }
  
  ul, ol {
    padding-left: 20px;
    
    li {
      margin: 8px 0;
    }
  }
  
  code {
    background-color: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
  }
}

.code-block {
  background-color: #f5f5f5;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  border: 1px solid #e0e0e0;
  margin-top: 12px;
  
  code {
    background: none;
    padding: 0;
    font-family: 'Courier New', 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre;
    word-wrap: normal;
    display: block;
    color: #333;
  }
}
</style>